<template>
  <div class="comment-container" v-show="commentSwitch">
    <div
            class="area"
            ref="area"
            contenteditable="true"
            :id="areaId"
            @input="handleChange"
            @focus="emojiHide"
            :placeholder="$t(placeholder)"
    ></div>
    <div class="options-container">
       <div class="left-options">
         <i class="iconfont iconat" @click="openSelectUser"></i>
         <i class="iconfont icon-biaoqing" @click="openEmoji"></i>
       </div>
      <slot></slot>
    </div>
    <emoji
            :dom="areaId"
            @emojiHide="emojiHide"
            class="emoji"
            v-if="emojiSwitch"
            @valChange="handleChange"
    ></emoji>
      <new-select-user :is-show.sync="isShowSelectUser" @changeObjList="selectUserHandle"></new-select-user>
  </div>
</template>

<script>
import emoji from '@/repeatComponents/emoji/Emoji';
import emojiMixin from '@/components/mixin/Emoji';
import NewSelectUser from '../../components/common/NewSelectUser';
export default {
    name: 'Comment',
    data() {
        return {
            commentSwitch: false,
            defaultPhoneHeight: 0,
            nowPhoneHeight: 0,
            emojiSwitch: false,
            isShowSelectUser: false
        };
    },
    mixins: [emojiMixin],
    components: {
        NewSelectUser,
        emoji
    },
    mounted() {
        if (this.initShow) {
            this.commentSwitch = this.initShow;
        } else {
            this.defaultPhoneHeight = window.innerHeight;
            window.onresize = () => {
                this.nowPhoneHeight = window.innerHeight;
            };
        }
    },
    props: {
        areaId: {
            type: [String, Number],
            default: 'area'
        },
        initShow: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: [String, Number],
            default: 'circle278'
        }
    },
    model: {
        prop: 'value',
        event: 'valChange'
    },
    methods: {
        /**
         * 获取@的用户id
         */
        changeUserList() {
            let childNodes = this.$refs.area.childNodes;
            let memberList = [];
            childNodes.forEach(item => {
                if (item.nodeName === 'SPAN') {
                    memberList.push(item.getAttribute('data-id'));
                }
            });
            memberList = Array.from(new Set(memberList));
            this.$emit('changeUserList', memberList);
        },
        /**
         * 置入@用户的标签元素
         * @param data
         */
        selectUserHandle(data) {
            this.openComment();
            if (data.length > 0) {
                let list = [];
                data.forEach(item => {
                    let html = `<span contenteditable="false" data-id="${item.id}" style="color: #075ebb;">@${item.name}</span>`;
                    this.$refs.area.innerHTML += html;
                });
                this.$emit('valChange', this.utf16toEntities(this.$refs.area.innerHTML));
            }
        },
        openComment() {
            this.commentSwitch = true;
            this.$nextTick(() => {
                this.$refs.area.focus();
                this.emojiSwitch = false;
            });
        },
        handleChange() {
            this.emojiSwitch = false;
            this.$emit('valChange', this.utf16toEntities(this.$refs.area.innerHTML));
        },
        emojiHide() {
            this.emojiSwitch = false;
        },
        closeComment() {
            this.emojiSwitch = false;
            this.$refs.area.blur();
            this.commentSwitch = false;
        },
        clearComment() {
            this.$refs.area.innerHTML = '';
        },
        openEmoji() {
            this.$nextTick(() => {
                this.emojiSwitch = !this.emojiSwitch;
            });
        },
        openSelectUser() {
            this.$refs.area.blur();
            this.isShowSelectUser = true;
        }
    },
    watch: {
        nowPhoneHeight: function() {
            if ((this.defaultPhoneHeight === this.nowPhoneHeight) && !this.emojiSwitch && !this.isShowSelectUser) {
                this.commentSwitch = false;
                this.$refs.area.blur();
            }
        }
    },
    destroyed() {
        window.onresize = null;
    }
};
</script>

<style lang="less">
 .comment-container{
   width: 100%;
   max-height: 25%;
   background-color: #fff;
   padding: 5px 16px 10px 16px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   position: fixed;
   bottom:0;
   left:0;
   right:0;
   .area{
     height: 80px;
     position: relative;
     overflow: hidden;
     border-radius: 5px;
     box-sizing: border-box;
     padding: 5px;
     width: 100%;
     outline: none;
     font-size: 14px;
     border: 1px solid #dcdfe6;
     background: #f3f3f3;
     letter-spacing: 1px;
     &:focus {
       border: 1px solid #409eff;
     }
   }
   .emoji{
     position: absolute;
     top: -160px;
     box-sizing: border-box;
   }
   .area:empty:before {
     content: attr(placeholder);
     color: #ccc;
   }
   .options-container{
     display: flex;
     justify-content: space-between;
     .left-options{
       display: flex;
       justify-content: space-between;
       padding-top: 5px;
       width: 20%;
       >i{
         color: #c7c7cc;
       }
     }
   }
 }
</style>
